<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <style type="text/css">
        #contents {
            min-height: 550px;
           /* background: lightsalmon;*/
        }

        .searchRoom {
            /*background: #E14164;*/
            height: 500px;
        }

        .offNotice {
            height: 500px;
        }

        div[class*="row"] {
            padding: 10px 5px;
        }

        .offMain {
            background-color:rgba(0,0,0,0.8);opacity:0; /* margin-top:0px; */ width:100%; height:100%;

        }


        .sr1 {
            display: block;
            padding-top: 250px;
            font-size: 300%;
            font-weight: bold;
            color: white;
            text-align: center;
        }

        .sr2 {
            display: block;
            padding-top: 100px;
            font-size: 300%;
            font-weight: bold;
            color: white;
            text-align: center;
        }

        a:hover {
            text-decoration: none;
        }

        .search {
            background:#5E6BA1;
            height:500px;
            margin-top:-10px;
        }

        .re, .ev{
            height:250px;
        }
        .re{
            background:#E14164;
        }
        .ev{
            background:#70AB2D;
        }

        .searchEtc {
            background:#E14164;
            margin-left:0px;
            height:500px;
            margin-top:-10px;
        }
        table{
            width:370px;
        }
        th, td{
            height:45px;
            border-collapse: collapse;
            text-align:center;
            border:1px solid lightgrey;
        }
        th{
            background:dimgrey;
            color:white;
        }
        #plus{
            background:lightgrey;
        }
    </style>
<!-- contents -->
<div id="contents" class="row">

    <div class="row">

        <div class="searchRoom span7">
            <div class="row">
                    <div class="search span4">
                        <div class="offMain" style="opacity:0;">
                            <span class="sr1"><a href="sing.jsp">노래방검색</a></span>
                        </div>
                    </div>
                    <div class="searchEtc span3">
                       <div class="re">
                           <div class="offMain" style="opacity:0;">
                               <span class="sr2"><a href="sing.jsp">예약</a></span>
                           </div>
                       </div>
                       <div class="ev">
                           <div class="offMain" style="opacity:0;">
                               <span class="sr2"><a href="sing.jsp">이벤트</a></span>
                           </div>
                       </div>
                    </div>
            </div>


        </div>
        <!--span7-->

        <div class="offNotice span5">
            <table>
                <th>
                    <option>공지사항</option>
                </th>
                <tr>
                    <td>sd</td>
                </tr>
                <tr>
                    <td>sd</td>
                </tr>
                <tr>
                    <td>sd</td>
                </tr>
                <tr>
                    <td>sd</td>
                </tr>
                <tr>
                    <td>sd</td>
                </tr>
                <tr>
                    <td>sd</td>
                </tr>
                <tr>
                    <td>sd</td>
                </tr>
                <tr>
                    <td>sd</td>
                </tr>
                <tr>
                    <td>sd</td>
                </tr>
                <tr id="plus">
                    <td><a href="#">전체 공지사항 더보기 + </a></td>
                </tr>

            </table>
        </div>
    </div>
</div>


<script src="js/project.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>

<script>
    $('.offMain').hover(function () {
        $(this).animate({opacity: '1'});
    }, function () {
        $(this).animate({opacity: '0'});
    });

</script>